<template>
  <div>
    <div
      class="mapDialog"
      v-if="attributeList.unique != '沿街路段' && attributeList.unique != '环卫小压站'"
    >
      <div class="content" v-if="attributeList.unique != '车辆视频'">
        <div class="mapClose" @click="closePanel"></div>
        <div class="jumin" v-if="attributeList.unique === '居民区'">
          <div class="contentTitle">居民区信息</div>
          <div class="contentItem">
            <div class="contentLeft">小区名称:</div>
            <div class="contentRight">{{ attributeList.name }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属街道:</div>
            <div class="contentRight">{{ attributeList.category }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属居委:</div>
            <div class="contentRight">
              {{
                attributeList.neighborhoodCommittee ? attributeList.neighborhoodCommittee : '----'
              }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">物业联系人:</div>
            <div class="contentRight">
              {{ attributeList.companyName ? attributeList.companyName : '-----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">物业联系人电话:</div>
            <div class="contentRight">
              {{ attributeList.companyPhone ? attributeList.companyPhone : '-----' }}
            </div>
          </div>
        </div>
        <div class="danwei" v-if="attributeList.unique === '单位'">
          <div class="contentTitle">单位</div>
          <div class="contentItem">
            <div class="contentLeft">单位名称:</div>
            <div class="contentRight">{{ attributeList.name }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属街道:</div>
            <div class="contentRight">{{ attributeList.category }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">单位类型:</div>
            <div class="contentRight">{{ type ? type : '----' }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">行业主管部门:</div>
            <div class="contentRight">
              {{ attributeList.company ? attributeList.company : '----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">地址:</div>
            <div class="contentRight">{{ attributeList.site ? attributeList.site : '----' }}</div>
          </div>
        </div>
        <div class="yanjie" v-if="attributeList.unique === '可回收中转站'">
          <div class="contentTitle">可回收中转站</div>
          <div class="contentItem">
            <div class="contentLeft">中转站名称:</div>
            <div class="contentRight">{{ attributeList.name }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">服务范围:</div>
            <div class="contentRight">{{ attributeList.scopeOfServices }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">负责人姓名:</div>
            <div class="contentRight">
              {{ attributeList.principal ? attributeList.principal : '----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">负责人联系方式:</div>
            <div class="contentRight">
              {{ attributeList.principalPhone ? attributeList.principalPhone : '----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">企业信息名称:</div>
            <div class="contentRight">
              {{ attributeList.enterpriseName ? attributeList.enterpriseName : '----' }}
            </div>
          </div>
        </div>
        <div class="yanjie" v-if="attributeList.unique === '环卫公厕'">
          <div class="contentTitle">环卫公厕</div>
          <div class="contentItem">
            <div class="contentLeft">名称:</div>
            <div class="contentRight">{{ attributeList.typename }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">设施编号:</div>
            <div class="contentRight">
              {{ attributeList.facilitycode ? attributeList.facilitycode : '----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">管理单位:</div>
            <div class="contentRight">
              {{ attributeList.unit ? attributeList.unit : '----' }}
            </div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属街道:</div>
            <div class="contentRight">{{ attributeList.areaname }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">详细地址:</div>
            <div class="contentRight">
              {{ attributeList.address ? attributeList.address : '----' }}
            </div>
          </div>
        </div>
        <div class="imageContent">
          <div class="imagenNone" v-if="imageList.length === 0">暂无图片</div>
          <div class="imageOne" v-else-if="imageList.length === 1">
            <el-image style="width: 700px; height: 500px" :src="imageList[0]" fit="cover" />
          </div>
          <div v-else>
            <el-carousel :interval="4000" type="card" height="400px">
              <el-carousel-item v-for="(item, index) in imageList" :key="index">
                <el-image style="width: 400px; height: 400px" :src="item" fit="cover" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="content" v-else>
        <div class="mapClose" @click="closePanel"></div>
        <div class="contentTitle">车辆信息</div>
        <div class="contentItem">
          <div class="contentLeft">车牌号:</div>
          <div class="contentRight">{{ attributeList.carNumber }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">设备ID:</div>
          <div class="contentRight">{{ attributeList.terid }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">速度:</div>
          <div class="contentRight">{{ carSpeed }}km/h</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">GPS最近一次记录时间:</div>
          <div class="contentRight">{{ carTime }}</div>
        </div>
        <div class="videocontainer">
          <video id="videoElement" autoplay controls muted="muted" ref="videoElement"></video>
        </div>
      </div>
    </div>
    <div v-else-if="attributeList.unique === '沿街路段'" class="mapDialog alongStreet">
      <div class="content">
        <div class="mapClose" @click="closePanel"></div>
        <div class="contentTitle">沿街路段</div>
        <div class="contentItem">
          <div class="contentLeft">路段名称:</div>
          <div class="contentRight">{{ attributeList.name }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">所属街道:</div>
          <div class="contentRight">{{ attributeList.category }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">沿街商铺数量:</div>
          <div class="contentRight">
            {{ attributeList.shopNumber ? attributeList.shopNumber : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">负责人:</div>
          <div class="contentRight">
            {{ attributeList.linkmanName ? attributeList.linkmanName : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">负责人联系方式:</div>
          <div class="contentRight">
            {{ attributeList.linkmanPhone ? attributeList.linkmanPhone : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">上门收运单位:</div>
          <div class="contentRight">
            {{ attributeList.visitIncorporateUnit ? attributeList.visitIncorporateUnit : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">收运车型:</div>
          <div class="contentRight">
            {{
              attributeList.incorporateMotorcycleType
                ? attributeList.incorporateMotorcycleType
                : '----'
            }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">上门收运频次:</div>
          <div class="contentRight">
            {{ attributeList.visitGather ? attributeList.visitGather : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">上门收运时间段:</div>
          <div class="contentRight">
            {{ attributeList.visitGatherTime ? attributeList.visitGatherTime : '----' }}
          </div>
        </div>
      </div>
    </div>
    <div class="mapDialog power" v-else-if="attributeList.unique === '环卫小压站'">
      <div class="content">
        <div class="mapClose" @click="closePanel"></div>
        <div class="contentTitle">环卫小压站</div>
        <div class="contentItem">
          <div class="contentLeft">名称:</div>
          <div class="contentRight">{{ attributeList.typename }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">设施编号:</div>
          <div class="contentRight">
            {{ attributeList.facilitycode ? attributeList.facilitycode : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">管理单位:</div>
          <div class="contentRight">
            {{ attributeList.unit ? attributeList.unit : '----' }}
          </div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">所属街道:</div>
          <div class="contentRight">{{ attributeList.areaname }}</div>
        </div>
        <div class="contentItem">
          <div class="contentLeft">详细地址:</div>
          <div class="contentRight">
            {{ attributeList.address ? attributeList.address : '----' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElCarousel, ElImage, ElCarouselItem } from 'element-plus'
import { Http } from '@/http/index'
import { clearpanelAll } from '@/utils/map'
import mpegts from 'mpegts.js'
import { carVideoStore } from '@/stores/carMessage'
let carHandler = carVideoStore()
const ENV = import.meta.env
let player = null
let videoElement = ref(null)
let carInterval = null
let carSpeed = ref(null)
let carTime = ref(null)
const typeCorr = {
  2: '菜场',
  3: '党政机关',
  4: '饭店',
  5: '机关',
  6: '商场',
  7: '写字楼、商务楼宇',
  8: '学校',
  9: '医院',
  10: '其他'
}
let type = ref('')
const props = defineProps({
  attributeList: Object
})
let imageList = ref([])
onMounted(() => {
  console.log(props.attributeList, 'hahhah')
  if (props.attributeList.unique === '车辆视频') {
    carSpeed.value = props.attributeList.speed
    carTime.value = props.attributeList.gpstime
    initVideo()
    intervalSpeed(props.attributeList.carNumber)
  } else if (props.attributeList.unique != '沿街路段') {
    initData()
  }
  if (props.attributeList.unique === '单位') {
    type.value = typeCorr[props.attributeList.type]
  }
})
onBeforeUnmount(() => {
  if (player) {
    player.pause()
    player.unload()
    // 卸载DOM对象
    player.detachMediaElement()
    // 销毁flvjs对象
    player.destroy()
    player = null
  }
  if (carInterval) {
    clearInterval(carInterval)
  }
})
const initData = async () => {
  imageList.value = []
  if (props.attributeList.unique === '可回收中转站') {
    if (props.attributeList.imageExternal) {
      let imageExternal = transFer(props.attributeList.imageExternal)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageExternal}`)
    }
    if (props.attributeList.imageInteriorOne) {
      let imageInteriorOne = transFer(props.attributeList.imageInteriorOne)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageInteriorOne}`)
    }
    if (props.attributeList.imageInteriorTwo) {
      let imageInteriorTwo = transFer(props.attributeList.imageInteriorTwo)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageInteriorTwo}`)
    }
    if (props.attributeList.imageInteriorThree) {
      let imageInteriorThree = transFer(props.attributeList.imageInteriorThree)
      imageList.value.push(
        `${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageInteriorThree}`
      )
    }
    if (props.attributeList.imageInteriorFour) {
      let imageInteriorFour = transFer(props.attributeList.imageInteriorFour)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageInteriorFour}`)
    }
  } else if (props.attributeList.unique === '环卫公厕') {
    if (props.attributeList.photo) {
      let imagePhoto = transFer(props.attributeList.photo)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imagePhoto}`)
    }
  } else {
    if (props.attributeList.imageFront) {
      let imageFront = transFer(props.attributeList.imageFront)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageFront}`)
    }
    if (props.attributeList.imageLeft) {
      let imageLeft = transFer(props.attributeList.imageLeft)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageLeft}`)
    }
    if (props.attributeList.imageRight) {
      let imageRight = transFer(props.attributeList.imageRight)
      imageList.value.push(`${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${imageRight}`)
    }
  }
}
const initVideo = () => {
  if (player) {
    player.pause()
    player.unload()
    // 卸载DOM对象
    player.detachMediaElement()
    // 销毁flvjs对象
    player.destroy()
    player = null
  }
  if (mpegts.getFeatureList().mseLivePlayback) {
    player = mpegts.createPlayer({
      type: 'flv', // could also be mpegts, m2ts, flv
      isLive: true,
      // url: `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`
      url: `http://180.169.19.179:17893/live.flv?devid=${props.attributeList.terid}&chl=1&dt=mdvr&st=1`
    })
    player.attachMediaElement(videoElement.value)
    player.load()
    player.play()
  }
}
const closePanel = () => {
  if (carInterval) {
    clearInterval(carInterval)
  }
  clearpanelAll()
}
const transFer = (str) => {
  return str.replace('\\', '/')
}
const intervalSpeed = (number) => {
  carInterval = setInterval(() => {
    Http.carTracked({ carNumber: number }).then((res) => {
      if (res.code === 200) {
        carSpeed.value = res.result[0].speed
        carTime.value = res.result[0].gpstime
        console.log(res.result[0])
      }
      console.log('图大王')
    })
  }, 1000)
  carHandler.saveCarInterval(carInterval)
}
</script>
<style scoped lang="scss">
.mapDialog {
  width: 820px;
  height: 1002px;
  box-sizing: border-box;
  background: url('@/assets/images/map/mapBack.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -795px;
  left: 40px;
  &::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -40px;
    width: 76px;
    height: 131px;
    background: url('@/assets/images/map/line.png') no-repeat;
    background-size: 100% 100%;
  }
  .content {
    font-size: 30px;
    padding: 0 50px 0 50px;
    position: relative;
    .mapClose {
      position: absolute;
      right: 30px;
      top: 20px;
      width: 70px;
      height: 70px;
      background: url('@/assets/images/map/close.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .imageContent {
      margin-top: 50px;
      padding: 0 5px;
      .imagenNone {
        height: 400px;
        // text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .imageOne {
        transform: translateY(-25px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .contentTitle {
      height: 120px;
      display: flex;
      align-items: center;
      color: #48cbe8;
      font-weight: 700;
      font-size: 30px;
    }
    .contentItem {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .contentLeft {
        // font-size: 35px;
        // width: 200px;
        margin: 0 20px 0 0;
        color: #48cbe8;
      }
      .contentRight {
        flex: 1;
      }
    }
    .videocontainer {
      width: 725px;
      height: 580px;
      margin-top: 10px;
      // background-color: red;
      #videoElement {
        width: 725px;
        height: 580px;
        object-fit: fill;
        border: solid 2px #ffc64d;
      }
    }
  }
}
.alongStreet {
  height: 702px;
  top: -490px;
  left: 40px;
  .content {
    .contentTitle {
      height: 80px;
    }
    .mapClose {
      right: 30px;
      top: 5px;
    }
  }
}
.power {
  width: 700px;
  height: 450px;
  top: -250px;
  left: 40px;
  .content {
    .contentTitle {
      margin-top: 45px;
      height: 60px;
    }
    .mapClose {
      right: 30px;
      top: 5px;
    }
  }
}
</style>
